<template>
  <xy-page>
    <div class="viewImg">
      <div class="context fl">
        <el-form :model="form" status-icon ref="form">
          <el-form-item label="当前直播图标:" :label-width="labwidth">
            <template slot-scope="scope">
              <div v-if="imageUrl" :style="'background-image: url(' + imageUrl + ')'" class="avatar ft10"></div>
              <div v-else style="background-image: url('/static/images/default-polyv-logo.png')" class="avatar ft10"></div>
              <span class="title mgl20">
                为了保证显示效果，请上传 140 x 140 大小的图标，支持jpg、jpeg、png格式，文件大小不超过 2M
                <xy-upload @uploadImage="logoImg" :imgSize="2" accept="image/jpeg,image/png" checkSuffix="jpg,jpeg,png">
                  <el-button>上传图标</el-button>
                </xy-upload>
              </span>
            </template>
          </el-form-item>
          <el-form-item label="引导页图片:" :label-width="labwidth" class="mgt40">
            <el-switch v-model="form.value" class="ft10"></el-switch>
            <span class="title mgl20" v-if="form.value">
              为了保证显示效果，请上传 750 x 864大小的图片，支持jpg、jpeg、png格式，大小不超过 2M
              <xy-upload @uploadImage="guideImg" :imgSize="2" accept="image/jpeg,image/png" checkSuffix="jpg,jpeg,png">
                <el-button>更换引导图</el-button>
              </xy-upload>
            </span>
          </el-form-item>
          <el-form-item :label-width="labwidth">
            <el-button type="primary" class="mgt40"  @click="saveImg">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="preview">
        <div class="txtC">
          移动端预览
        </div>
        <div v-if="previewImg" :style="'background-image: url(' + previewImg + ')'" class="preview-image ft10"></div>
        <div v-else style="background-image: url('/static/images/default.png')" class="preview-image ft10"></div>
      </div>
    </div>
  </xy-page>
</template>

<script>
export default {
  data() {
    return {
      labwidth: '150px',
      form: {
        value:0
      },
      channelId: '',
      appId: '',
      imageUrl: ' ', // 直播图标 (加空格是为了防止请求参数时先显示了默认图片)
      previewImg: ' ', // 移动端预览
    }
  },
  methods: {
    logoImg(param){ //上传图标
      this.imageUrl = param
    },
    guideImg(param){//上传引导页
      this.previewImg = param
    },
    getStatus(){//获取引导页图片设置
      this.$postStream('/admin/instance/ccb/polyv/channel/baseImg/get.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId
        },
        success:(res)=> {
          if(res.success){
            this.form.value=this.booleanChange(res.object.splashEnabled)
            this.previewImg = res.object.splashImg || ''
            this.imageUrl = res.object.coverImg || ''
            if(res.object.coverImg == '/assets/wimages/pc_images/logo.png'){
              this.imageUrl = ''
            }
          }else{
            this.$message.error('获取设置失败!')
          }
        }
      })   
    },
    saveImg(){//保存设置
      this.$postStream('/admin/instance/ccb/polyv/channel/baseImg/update.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId,
          coverImg: this.imageUrl,
          splashEnabled: this.letterChange(this.form.value),
          splashImg: this.previewImg
        },
        success:res=>{
          if(res.success){
            this.$message.success('保存成功!')
            this.getStatus()
          }else{
            res.code == 50001?this.$message.error(res.message):this.$message.error('保存失败!')
          }
        }
      })
    }
  },
  mounted() {
    this.channelId = sessionStorage.getItem('channelId')
    this.appId = sessionStorage.getItem('appId') || ''
    this.getStatus()
  }
}
</script>

<style lang="scss" scoped>
.viewImg {
  position: relative;
  width: 100%;
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    border: 1px solid;
  }
  .avatar {
    width: 120px;
    height: 120px;
    border: 1px solid #ccc;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .title {
    color: #ccc;
    display: inline-block;
    width: 330px;
  }
  .preview {
    position: absolute;
    left: 700px;
  }
  .preview-image{
    width:300px;
    height:533px;
    border:1px solid #ccc;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
  }
}
</style>
